<template>
    <el-dialog title="发票详情" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-descriptions title="发票信息" :column="2" size="small">
            <el-descriptions-item label="发票抬头">{{ billDetail.com_name }}</el-descriptions-item>
            <el-descriptions-item label="企业税号">{{ billDetail.tax_num }}</el-descriptions-item>
            <el-descriptions-item label="发票类型">{{ billDetail.type }}</el-descriptions-item>
            <el-descriptions-item label="发票抬头类型">{{ billDetail.invoice_header }}</el-descriptions-item>	
            <el-descriptions-item label="开票金额">{{ billDetail.income_money }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="联系人信息" :column="2" size="small">
            <el-descriptions-item label="联系人">{{ billDetail.com_contact }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ billDetail.com_phone }}</el-descriptions-item>
        </el-descriptions>
        <div class="invoice-wrap" v-if="accountNo">
            <h2>上传发票</h2>
            <div class="invoice-con">
                <el-upload class="upload-demo" :show-file-list="false" :headers="headers" accept="pdf" name="iFile" :action="uploadUrl" :data="fileData"
                           :on-success="handleSuccess" :on-progress="handleProgress" v-if="!billDetail.invoice" :before-upload="handleBeforeUpload">
                    <div class="upload-invoice-wrap">
                        <el-button size="small" type="primary">上传发票</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传PDF/pdf文件，且不超过500kb</div>
                    </div>
                </el-upload>
                <div class="invoice-file-wrap" v-else @click="download">
                    <div class="left">
                        <i class="el-icon-document"></i>
                        <span>{{ billDetail.invoice_name }}</span>
                    </div>
                    <div class="close">
                        <i class="el-icon-circle-close" @click.stop="handleRemove"></i>
                    </div>
                </div>
                <el-progress :percentage="precent" :show-text="false" :stroke-width="3" class="progress" v-if="showProgress"></el-progress>
            </div>
        </div>

    </el-dialog>
</template>

<script>
import { billDetail,invoiceUpload } from '../../../api/finance';
import hostUrl from "@/utils/baseUrl.js";
import { deleteFile } from "@/api/upload.js";
export default {
    name: "supplyInvoice",
    props: {},
    data() {
        return {
            visible: false,
            billId: '',
            billDetail: {},
            uploadUrl: hostUrl + "/uploadFile",
            headers: {
                Authorization: localStorage.getItem("Supply-Access-Token")
                    ? localStorage.getItem("Supply-Access-Token")
                    : "",
            },
            fileData: {
                type: 20,
            },
            precent: 0,
            showProgress: false,
            accountNo:true,
        };
    },
    created() {

    },
    methods: {
        add() {
            this.visible = true;
        },
        getDetail() {
            const that = this;
            billDetail({
                bill_id: that.billId
            }).then(res => {
                if (res.code == 0) {
                    that.billDetail = res.data;
                }else if(res.code == 1060){
                    that.accountNo = false
                }
            })
        },
        handleSuccess(res) {
            console.log('res', res)
            if (res.code == 0) {
                this.billDetail.invoice = res.file_url;
                invoiceUpload({
                    bill_id:this.billId,
                    invoice:this.billDetail.invoice,
                    invoice_name:res.file_name,
                }).then(res=>{
                    if(res.code == 0){
                        this.$message.success(res.msg)
                        this.showProgress = false;
                        this.precent = 0;
                        this.$emit('success')
                    }else{
                        this.$message.error(res.msg)
                        this.showProgress = false;
                        this.precent = 0;
                    }
                })
            } else {
                this.$message.error(res.msg)
                this.showProgress = false;
                this.precent = 0;
            }
        },
        handleRemove() {
            console.log('删除',this.billDetail)
            this.billDetail.invoice = '';
            console.log('删除',this.billDetail)
        },
        handleProgress(event, file) {
            console.log('file', file)
            this.billDetail.invoice_name = file.name;
            this.showProgress = true;
            this.precent = Math.round((event.loaded / event.total) * 100);
        },
        handleBeforeUpload(file) {
            const isTypePdf = file.type == 'application/pdf';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.warning("文件大小不能超过 2MB!");
                return isLt2M;
            }
            if (!isTypePdf) {
                this.$message.warning("只能上传pdf文件！");
                return isTypePdf;
            }
        },
        download() {
            window.location.href = this.billDetail.invoice;
        },
        close() {
            this.visible = false;
        },
    },
};
</script>

<style scoped>
/deep/ .el-dialog__body {
    padding: 0px 20px 20px;
}
/deep/ .el-descriptions {
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
/deep/ .el-descriptions:last-of-type {
    border-bottom: 0;
}
/deep/ .el-descriptions__header {
    margin-bottom: 16px;
}
/deep/ .el-descriptions__title {
    font-size: 14px;
}
/deep/ .el-upload {
    width: 100%;
    height: inherit;
    line-height: 0;
}
.invoice-wrap {
    padding-top: 16px;
}
.invoice-wrap h2 {
    font-size: 14px;
}
.upload-invoice-wrap {
    display: flex;
    align-items: center;
}
.el-upload__tip {
    margin-left: 10px;
}
.invoice-con {
    padding-top: 8px;
}
.invoice-file-wrap {
    text-align: left;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 26px;
    cursor: pointer;
}
.invoice-file-wrap:hover {
    color: var(--main-color);
    text-decoration: underline;
    text-decoration-color: var(--main-color);
}
.left {
    flex: 1;
}
.left span {
    font-size: 12px;
}
.progress {
    margin-top: 5px;
}
.invoice-file-wrap i {
    font-size: 16px;
}
.close {
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
}
</style>